<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Pie Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->
<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!-- Owl Stylesheets -->
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
 <script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
				});
			});
		</script>
<!--Animation-->
<script src="js/wow.min.js"></script>
<link href="css/animate.css" rel='stylesheet' type='text/css' />
<script>
	new WOW().init();
</script>
</head>
<body>
	<!-- header-section-starts -->
	<div class="header " id="home">
		<div class="container">
			<div class="logo wow fadeInRight" data-wow-delay="0.4s">
				<a href="#"><img src="images/logo.png" alt="" /></a>
			</div>
			<span class="menu"></span>
			<div class="top-menu wow fadeInLeft" data-wow-delay="0.4s">
				<ul>
					<li><a class="active scroll hvr-shutter-out-horizontal" href="#home">首页</a></li>
					<li><a class="scroll hvr-shutter-out-horizontal" href="#service">服务</a></li>
					<li><a class="scroll hvr-shutter-out-horizontal" href="#about">关于我们</a></li>
					<li><a class="scroll hvr-shutter-out-horizontal" href="#pricing">购买计划</a></li>
					<li><a class="scroll hvr-shutter-out-horizontal" href="#work">服务流程</a></li>
					<li><a class="scroll hvr-shutter-out-horizontal" href="#clients">客户</a></li>
					<li><a class="scroll hvr-shutter-out-horizontal" href="#contact">联系我们</a></li>
                                        <li><a class="scroll hvr-shutter-out-horizontal" href="#" target="_blank" onclick="window.open('/glory/backend/regist.html');return false;">注册</a></li>
                                        <li><a class="scroll hvr-shutter-out-horizontal" href="#" target="_blank" onclick="window.open('/glory/backend/login.html');return false;">登录</a></li>
                                       
				</ul>
			</div>
				<!-- script for menu -->
				<script>
				$( "span.menu" ).click(function() {
				  $( ".top-menu" ).slideToggle( "slow", function() {
				    // Animation complete.
				  });
				});
			</script>
			<!-- script for menu -->

			<div class="clearfix"></div>
		</div>
	</div>
	<div class="banner wow fadeInUp" data-wow-delay="0.4s">
		<div class="container">
			<div class="banner-info text-center">
				<h2 class="wow bounceInLeft" data-wow-delay="0.4s">进入同质配件大市场</h2>
				<p class="wow bounceInLeft" data-wow-delay="0.4s">更好的价格，更好的服务，更大的回报</p>
				<div class="details wow fadeInLeft" data-wow-delay="0.4s">
					<form>
						<li>
							<input type="text" class="text" value="姓名" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '姓名';}">
							<a class="name" href="#"></a>
						</li>
						<li>
							<input type="text" class="text" value="电子邮箱" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '电子邮箱';}">
							<a class="mail" href="#"></a>
						</li>
						<li>
							<input type="text" class="text" value="手机号码" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '手机号码';}">
							<a class="num" href="#"></a>
						</li>
							<input type="submit" value="马上行动">
					</form>
				</div>
			</div>
			<div class="header-bottom">
		<div class="right-grid-1">
					<section class="slider">
							<div class="flexslider">
							  <ul class="slides">
								<li>
									<img src="images/s1.jpg" class="img-responsive" alt="" />
                                                                        
									</li>
									<li>
									<img src="images/s2.jpg" class="img-responsive" alt="" />
									</li>
									<li>
									<img src="images/s3.jpg" class="img-responsive" alt="" />
									</li>
                                                                        <li>
									<img src="images/s4.jpg" class="img-responsive" alt="" />
									</li>
							  </ul>
							</div>
						  </section>
						  <!-- FlexSlider -->
						  <script defer src="js/jquery.flexslider.js"></script>
						  <script type="text/javascript">
							$(function(){
							  //SyntaxHighlighter.all();
							});
							$(window).load(function(){
							  $('.flexslider').flexslider({
								animation: "slide",
								start: function(slider){
								  $('body').removeClass('loading');
								}
							  });
							});
						  </script>
                    </div>	
				</div>					
		</div>
		</div>
		<div class="content">
			<div class="service-section" id="service">
				<div class="container">
					<div class="service-section-head text-center wow fadeInRight" data-wow-delay="0.4s">
						<h3>我们的服务</h3>
						<p>为优质产品提供更好的服务</p>
					</div>
					<div class="service-section-grids">
						<div class="col-md-6 service-grid">
							<div class="service-section-grid wow bounceIn" data-wow-delay="0.4s">
								<div class="icon">
									<i class="s1"></i>
								</div>
								<div class="icon-text">
									<h4>Font-Awesome Icons</h4>
									<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="service-section-grid wow bounceIn" data-wow-delay="0.4s">
								<div class="icon">
									<i class="s2"></i>
								</div>
								<div class="icon-text">
									<h4>Working Contact form</h4>
									<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="service-section-grid wow bounceIn" data-wow-delay="0.4s">
								<div class="icon">
									<i class="s3"></i>
								</div>
								<div class="icon-text">
									<h4>Friendly Code</h4>
									<p>Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham</p>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
						<div class="col-md-6 service-grid">
							<div class="service-section-grid wow bounceIn" data-wow-delay="0.4s">
								<div class="icon">
									<i class="s4"></i>
								</div>
								<div class="icon-text">
									<h4>Fully Responsive Design</h4>
									<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="service-section-grid wow bounceIn" data-wow-delay="0.4s">
								<div class="icon">
									<i class="s5"></i>
								</div>
								<div class="icon-text">
									<h4>Retina Ready icons here</h4>
									<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humouror randomised words which don't look even slightly believable.</p>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="service-section-grid wow bounceIn" data-wow-delay="0.4s">
								<div class="icon">
									<i class="s6"></i>
								</div>
								<div class="icon-text">
									<h4>Flat trendy landing page Design</h4>
									<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
            <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div>
			<div class="about-section" id="about">
				<div class="col-md-6 about_left wow bounceInLeft">
					<img src="images/about_pic.jpg" alt="" />
				</div>
				<div class="col-md-6 about_right wow bounceInRight">
					<h3>ABout us</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the ore recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
					<a href="#">Read more</a>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="price-section" id="pricing">
				<div class="container">
					<div class="price-section-head text-center wow fadeInLeft" data-wow-delay="0.4s">
						<h3>选择合适的计划</h3>
						<p>根据自身情况，选择最划算的服务计划。</p>
					</div>
					<div class="price-section-grids">
						<div class="col-md-4 price-value text-center wow fadeInLeft" data-wow-delay="0.4s">
							<div class="price-section-grid">
								<h5>免费服务</h5>
								<h3><span>$</span>0</h3>
								<p>全天候</p>
								<ul>
									<li>免费查询零部件信息</li>
									<li>免费查询检测信息</li>
									<li>免费查询认证信息</li>								
								</ul>
								<a href="#">开始</a>
							</div>
						</div>
						<div class="col-md-4 price-value text-center wow fadeInUp" data-wow-delay="0.6s">
							<div class="price-section-grid">
								<h5>高级服务</h5>
								<h3><span>$</span>42</h3>
								<p>per month</p>
								<ul>
									<li>2 Account</li>
									<li>100MB Storage</li>
									<li>Custom Cloud Services</li>								
								</ul>
								<a href="#">Get Started</a>
							</div>
						</div>
						<div class="col-md-4 price-value text-center wow fadeInRight" data-wow-delay="0.4s">
							<div class="price-section-grid">
								<h5>金牌服务</h5>
								<h3><span>$</span>62</h3>
								<p>per month</p>
								<ul>
									<li>8 Account</li>
									<li>24 hour support</li>
									<li>Custom Cloud Services</li>								
								</ul>
								<a href="#">Get Started</a>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<div class="work-section" id="work">
				<div class="container">
					<div class="work-section-head text-center wow fadeInRight" data-wow-delay="0.4s">
						<h3>服务流程</h3>
						<p>为汽车零部件提供全生命周期服务</p>
					</div>
					<div class="work-section-grids text-center wow fadeInUp" data-wow-delay="0.4s">
						<div class="col-md-3 work-section-grid">
							<i class="ear-phones"></i>
							<h4>第一步：生产</h4>
							<p>生产信息记录，厂家信息，零部件生产信息，生产数据。</p>
							<span class="arrow1"><img src="images/arrow1.png" alt="" /></span>
						</div>
						<div class="col-md-3 work-section-grid wow fadeInUp" data-wow-delay="0.6s">
							<i class="lock"></i>
							<h4>第二步：检测认证</h4>
							<p>检测信息记录，认证信息记录。</p>
							<span class="arrow2"><img src="images/arrow2.png" alt="" /></span>
						</div>
						<div class="col-md-3 work-section-grid wow fadeInUp" data-wow-delay="0.8s">
							<i class="cloud"></i>
							<h4>第三步：销售</h4>
							<p>销售渠道信息记录，经销商，销售日期</p>
							<span class="arrow1"><img src="images/arrow1.png" alt="" /></span>
						</div>
						<div class="col-md-3 work-section-grid wow fadeInUp" data-wow-delay="0.10s">
							<i class="done"></i>
							<h4>第四步：追踪</h4>
							<p>零部件去向跟踪，维修信息，安装信息记录</p>
						</div>
						<div class="clearfix"></div>
						<a class="work" href="#">Get start Now</a>
					</div>
				</div>
			</div>
			<div class="happy-clients" id="clients">
				<div class="container">
					<div class="happy-clients-head text-center wow fadeInRight" data-wow-delay="0.4s">
						<h3>我们的客户</h3>
						<p>我们的客户遍及整个汽车零部件产业链</p>
					</div>
					<div class="happy-clients-grids">
						<div class="col-md-6 happy-clients-grid wow bounceIn" data-wow-delay="0.4s">
							<div class="client">
								<img src="images/client_1.jpg" alt="" />
							</div>
							<div class="client-info">
								<p><img src="images/open-quatation.jpg" class="open" alt="" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make.<img src="images/close-quatation.jpg" class="closeq" alt="" /></p>
								<h4><a href="#">Darwin Michle, </a>Project manager</h3>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="col-md-6 happy-clients-grid span_66 wow bounceIn" data-wow-delay="0.4s">
							<div class="client">
								<img src="images/client_2.jpg" alt="" />
							</div>
							<div class="client-info">
								<p><img src="images/open-quatation.jpg" class="open" alt="" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<img src="images/close-quatation.jpg" class="closeq" alt="" /></p>
								<h4><a href="#">Madam Elisabath, </a>Creative Director</h3>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="col-md-6 happy-clients-grid wow bounceIn" data-wow-delay="0.4s">
							<div class="client">
								<img src="images/client_3.jpg" alt="" />
							</div>
							<div class="client-info">
								<p><img src="images/open-quatation.jpg" class="open" alt="" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make.<img src="images/close-quatation.jpg" class="closeq" alt="" /></p>
								<h4><a href="#">Clips arter, </a>Lipsum directer</h3>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="col-md-6 happy-clients-grid span_66 wow bounceIn" data-wow-delay="0.4s">
							<div class="client">
								<img src="images/client_4.jpg" alt="" />
							</div>
							<div class="client-info">
								<p><img src="images/open-quatation.jpg" class="open" alt="" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<img src="images/close-quatation.jpg" class="closeq" alt="" /></p>
								<h4><a href="#">zam cristafr,  </a>manager</h3>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>	
			<div class="contact-section" id="contact">
				<div class="container">
					<div class="contact-section-head text-center wow fadeInLeft" data-wow-delay="0.4s">
						<h3>联系我们</h3>
						<p>一个电子邮件，改变您的商务模式，让您的业务更上层楼</p>
					</div>
					<div class="form wow fadeInLeft" data-wow-delay="0.4s">
						<form>
							<li>
								<input type="text" class="text" value="Name" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name';}">
								<a class="name" href="#"></a>
							</li>
							<li>
								<input type="text" class="text" value="Email Address" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Email Address';}">
								<a class="mail" href="#"></a>
							</li>
								<input type="submit" value="Subscribe now">
						</form>
					</div>
					<div class="map">
						<img src="images/map.jpg" alt="" />
						<div class="location wow bounceIn" data-wow-delay="0.4s">
							<div class="address text-center">
								<h4>地址</h4>
								<p>北京市</p>
								<p>总部基地</p>
								<p>8区</p>
								<p>Call : +10-9976-9999</p>
								<a href="example@mail.com">info@ciqac.com</a>
								<span class="locate"><img src="images/locate.png" alt="" /></span>
							</div>
							<div class="bottom-logo text-center">
								<img src="images/logo.png" alt="" />
							</div>
						</div>
					</div>
					<div class="contact-bottom text-center">
						<div class="bottom-menu wow bounceInRight" data-wow-delay="0.4s">
							<ul>     
								<li><a class="scroll" href="#home">首页</a></li>                                                                               
								<li><a class="scroll" href="#service">服务</a></li>
								<li><a class="scroll" href="#about">关于我们</a></li>
								<li><a class="scroll" href="#pricing">服务计划</a></li>
								<li><a class="scroll" href="#work">服务流程</a></li>
								<li><a class="scroll" href="#clients">客户</a></li>
								<li><a class="scroll" href="#contact">联系我们</a></li>
							</ul>
						</div>
						<p class="call wow fadeInRight" data-wow-delay="0.4s"><i class="phone wow fadeInLeft" data-wow-delay="0.4s"></i> +987 9976 999</p>
						<div class="social-icons">
							<a class="wow bounceIn" data-wow-delay="0.4s" href="#"><i class="twitter"></i></a>
							<a class="wow bounceIn" data-wow-delay="0.4s" href="#"><i class="facebook"></i></a>
							<a class="wow bounceIn" data-wow-delay="0.4s" href="#"><i class="googlepluse"></i></a>
							<a class="wow bounceIn" data-wow-delay="0.4s" href="#"><i class="linkedin"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div>
        
        
		<div class="footer">
			<div class="container">
				<div class="copyright text-center wow bounceInLeft" data-wow-delay="0.4s">
					<p>Copyright &copy; 2015.CIQAC All rights reserved.<a target="_blank" href="http://www.ciqac.com/"></a> </p>
				</div>
			</div>
		</div>
		<script type="text/javascript">
						$(document).ready(function() {
							/*
							var defaults = {
					  			containerID: 'toTop', // fading element id
								containerHoverID: 'toTopHover', // fading element hover id
								scrollSpeed: 1200,
								easingType: 'linear' 
					 		};
							*/
							
							$().UItoTop({ easingType: 'easeOutQuart' });
							
						});
					</script>
				<a class="scroll" href="#home" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
</body>
</html>